<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/loginAndRegister.css"/>
	</head>
	<body class="login loginType">
		<!--登录模块头部 start-->
		<div class="loginHead">
			<div class="loginHeadContent">
				<div class="fl">
					<a href="javascript:void(0);"><img src="../img/indexLogoWhite.png" class="indexLogo"/></a>
				</div>
				<div class="fr">
					<div class="aGroup">
						<a class="loginMenu" href="javascript:void(0);">项目圈</a>
						<a class="loginMenu" href="javascript:void(0);">材料数据库</a>
						<a class="loginMenu" href="javascript:void(0);">计算工具</a>
						<div class="clear"></div>
					</div>
					<div class="btnGroup">
						<a class="btn" href="javascript:void(0);">注册</a>
						<a class="btn" href="javascript:void(0);">登录</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!--登录模块尾部 end-->
		
		<div class="loginContent">
			<div class="contentBox">
				<img src="../img/loginBg1.png" class="loginBgLogo"/>
				<div class="loginBox">
					<div class="loginBoxMenu">
						<div class="loginType" :class="{'active':type1}" @click="type1Show">账号密码登录</div>
						<div class="loginType" :class="{'active':type2}" @click="type2Show">微信登录</div>
						<div class="clear"></div> 
					</div>
					<div class="loginForm" :class="{'hidden':type2}">
						<div class="inputGroup">
							<input type="text" placeholder="手机号/邮箱" class="userInfo"/>
							<div class="tips"></div>
						</div>
						<div class="inputGroup">
							<input type="text" placeholder="密码 （6-16位，区分大小写）" class="userPw"/>
							<div class="tips"></div>
						</div>
						<div class="inputGroup">
							<div class="fl">
								<el-checkbox></el-checkbox>
								<span class="remember">记住我</span>
							</div>
							<div class="fr">
								<a href="javascript:void(0);" class="forget">忘记密码</a>
							</div>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<button class="loginBtn" @click="verification">登陆</button>
						</div>
					</div>
					<div class="weChatForm" :class="{'hidden':type1}">
						<img src="../img/loginCode.jpg" class="wid100">
					</div>
					<div class="toRegister">还没有账号，<a href="javascript:void(0);">立即注册</a></div>
				</div>
				<div class="clear"></div>
			</div>
			<!--尾部 start-->
			<div class="footer">Copyright © 2008 - 2017 深圳市建筑科学研究院 All Rights Reserved</div>
			<!--尾部 end-->
		</div>
		
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var loginContentMinHeight = $(window).innerHeight() - 80;
			$('.loginContent').css('min-height',loginContentMinHeight + 'px');
			
			//获取body高度
			var bodyMinHeight = $('.loginContent').height() + 80;
			$('body').css('min-height',bodyMinHeight + 'px');
		});
		
		var login = new Vue({
			el:'.loginContent',
			data:function(){
				return{
					type1:true,
					type2:false
				}
			},
			methods:{
				type1Show:function(){
					this.type1 = true;
					this.type2 = false;
				},
				type2Show:function(){
					this.type1 = false;
					this.type2 = true;
				},
				verification:function(){
					var UserVal = document.querySelector('.userInfo').value;
					var PwVal = document.querySelector('.userPw').value;
					if(!UserVal.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){
						document.querySelector('.userInfo').nextElementSibling.innerHTML = "";
					}else{
						document.querySelector('.userInfo').nextElementSibling.innerHTML = "请输入正确的手机号码或者邮箱";
					}
					if(!PwVal.match(/^[_0-9a-zA-Z]{6,16}$/)){
						document.querySelector('.userPw').nextElementSibling.innerHTML = '请输入6-16位的新密码，并区分大小写';
					}else{
						document.querySelector('.userPw').nextElementSibling.innerHTML = "";
					}
				}
			}
		});
	</script>
</html>
